<template>
  <div class="barrages-drop">
    <vue-baberrage
      :isShow="barrageIsShow"
      :barrageList="barrageList"
      :maxWordCount="maxWordCount"
      :throttleGap="throttleGap"
      :lanesCount="lanesCount"
      :loop="loop"
      :boxHeight="boxHeight"
      :messageHeight="messageHeight"
      class="barrages-box"
    >
    </vue-baberrage>
  </div>
</template>
<script>
import Vue from "vue";
import { vueBaberrage, MESSAGE_TYPE } from "vue-baberrage";
Vue.use(vueBaberrage);
export default {
  name: "Barrage",
  props: {
    notificationList: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    notificationList: {
      deep: true,
      handler: function (newVal) {
        this.barrageList = this.addToList(this.notificationList);
      },
    },
  },
  data() {
    return {
      barrageIsShow: true,
      messageHeight: 44,
      boxHeight: 184,
      loop: true,
      maxWordCount:120,
      throttleGap: 5000,
      lanesCount:3,
      barrageList: [],
    };
  },
  mounted() {
    this.barrageList = this.addToList(this.notificationList);
  },
  methods: {
    addToList(list) {
      let newList = [];
      for (let index in list) {
        let time = index * Math.random() * 10
        if(time<10){
          time=10+index* Math.random()
        }
        let item = {
          id: index,
          msg: list[index],
          time: time,
          type: MESSAGE_TYPE.NORMAL,
        };
        newList.push(item);
      }
      return newList;
    },
  },
};
</script>
<style lang="less" scoped>
.barrages-drop {
  .baberrage-stage {
    position: absolute;
    width: 100%;
    height: 184px;
    overflow: hidden;
    top: 252px;
    z-index: 2;
    ::v-deep {
      .baberrage-item {
        .normal {
          padding: 0 34px;
          height: 44px;
          background: rgba(0, 0, 0, 0.5);
          .baberrage-avatar {
            display: none !important;
          }
        }
        .baberrage-msg {
          padding: 0;
          font-size: 20px;
          color: #ffffff;
          line-height: 44px;
        }
      }
    }
  }
}

::v-deep .baberrage-item {
  ::v-deep .normal {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 44px;
    padding: 0 82px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 22px;
    ::v-deep .baberrage-avatar {
      display: none;
    }
  }
}
</style>